1. Introducción

Este Dashboard demo se inspira en el esquema cyber/neón, usando Chakra UI como base de diseño en Vision UI Dashboard. El objetivo de este análisis es mostrar cómo combinar datos, visualizaciones y el “look & feel” moderno, en Markdown lineal, útil para informes, presentaciones o auditorías UX.

2. Setup y Librerías

3. Paleta Cyber Vision UI para Gráficos

cyber_palette <- c(
  blue = "#3c5cfe",
  cyan = "#00eaff",
  purple = "#7f3ff3",
  gold = "#ffd700",
  error = "#ff1744",
  green = "#00e676"
)

4. Demo Dataset (simulación)

set.seed(1)
demo_data <- tibble(
  Categoria = rep(c("Web","Mobile"), each = 5),
  Métrica = c(
    "Usuarios", "Sesiones", "Conversiones", "Retención (%)", "Bounce Rate",
    "Usuarios", "Sesiones", "Conversiones", "Retención (%)", "Bounce Rate"
  ),
  Valor = round(runif(10, 33, 98), 2)
)
datatable(demo_data, caption="Tabla 1: Métricas demo dashboard Vision UI", options = list(pageLength = 10, dom = 'tip'))

5. Visualización: Barras Cyber

demo_data %>%
  ggplot(aes(x=Métrica, y=Valor, fill=Categoria)) +
  geom_col(width=0.7) +
  scale_fill_manual(values = cyber_palette[c("blue","gold")]) +
  labs(title = "Dashboard Demo: Métricas por Categoría", x=NULL, y=NULL) +
  theme_minimal(base_size = 12) +
  theme(
    plot.background = element_rect(fill = "#0b1437", color = NA),
    panel.background = element_rect(fill = "#171f3b", color = NA),
    text = element_text(color = "#e0e6ed"),
    axis.text = element_text(color = "#8b92a0"),
    axis.title = element_text(color = "#e0e6ed"),
    plot.title = element_text(color = "#3c5cfe", size=16, face="bold")
  )
## Warning: No shared levels found between `names(values)` of the manual scale and the
## data's fill values.
## No shared levels found between `names(values)` of the manual scale and the
## data's fill values.

6. Visualización Interactiva (Neón)

plot_ly(demo_data, x=~Métrica, y=~Valor, color=~Categoria,
        colors = cyber_palette[c("blue","gold")],
        type="bar", text = ~paste("Valor:", Valor), hoverinfo="text") %>%
  layout(
    title = list(text="Métricas interactivo • Visual style VisionUI", font=list(color="#3c5cfe")),
    plot_bgcolor = "#0b1437",
    paper_bgcolor = "#171f3b",
    font = list(color="#e0e6ed")
  )
## Warning: Some values were outside the color scale and will be treated as NA
## Some values were outside the color scale and will be treated as NA
## Some values were outside the color scale and will be treated as NA
## Some values were outside the color scale and will be treated as NA

7. Tabla Cyber con GT

demo_data %>%
  gt() %>%
  tab_header(title="Tabla 2: Métricas Vision UI Cyber") %>%
  tab_style(style = cell_fill(color = "#1c2746"), locations = cells_body()) %>%
  tab_style(style = cell_text(color="#00eaff", weight="bold"), locations = cells_body(columns = Métrica)) %>%
  tab_style(style = cell_text(color="#ffd700", weight="bold"), locations = cells_column_labels())
Tabla 2: Métricas Vision UI Cyber
Categoria Métrica Valor
Web Usuarios 50.26
Web Sesiones 57.19
Web Conversiones 70.24
Web Retención (%) 92.03
Web Bounce Rate 46.11
Mobile Usuarios 91.40
Mobile Sesiones 94.40
Mobile Conversiones 75.95
Mobile Retención (%) 73.89
Mobile Bounce Rate 37.02

8. Interpretación y Usabilidad

La paleta Vision UI (azul eléctrico, púrpura, cian) refuerza el foco de usuario y la sensación de modernidad, ayudando a resaltar métricas clave. Un dashboard eficaz combina estética avanzada y accesibilidad: contrastes altos, tablas claras y visualizaciones interactivas facilitan las decisiones en contextos de datos complejos.

9. Conclusión

Markdown lineal y cyber para análisis dashboard: - Ventajas: lectura clara, visuales vibrantes, código directo. - Facilidad: puedes integrar chunks R y estilos neón desde el propio repo Vision UI Chakra. - Siguiente paso: conecta datos reales, métricas y visualizaciones R al flujo de trabajo de tu dashboard en React/Chakra o Python.

10. Referencias

Dashboard Cyber • VisionUI • Universidad del Valle

v